<style scoped lang="less"></style>
<template>
  <el-header class="page-header">
    <!-- <img v-if="titlePictureUrl!=''" class="logo" :src="titlePictureUrl" alt=""> -->
    <!--		<img v-if="titlePictureUrl!=''" class="logo" src="../assets/images/index/title.png" alt="">-->
    <!--		<img class="logo" src="../assets/images/1.png" alt="">-->
    <h1 class="title">{{ title }}</h1>
    <div class="header-right" v-if="siteInfos">
      <span class="mr-20 fs-14" v-if="siteInfos.userType != 1"
        >服务到期时间:{{ serviceTime || "永久" }}</span
      >
      <p class="mr-20">
        <img
          class="avatar"
          src="../assets/images/index/avatar.png"
          alt="潍坊监管"
        />
        {{ siteInfos.userRealName || siteInfos.accountname || "潍坊监管" }}
      </p>
      <!-- <a class="ml-30" href="javascript:;" @click="editTitleAction" title="编辑标题" v-if='siteInfos.userType==1'><i class="iconfont icon-setting1"></i></a> -->

      <a class="ml-30" href="javascript:;" @click="editAction" title="编辑资料"
        ><i class="iconfont icon-edit"></i
      ></a>
      <a class="ml-30" href="javascript:;" @click="exitAction" title="退出"
        ><i class="iconfont icon-exit"></i
      ></a>
    </div>
    <div class="header-left" v-if="$route.path != '/'">
      <a href="javascript:;" title="返回" @click="goHome"
        ><i class="iconfont icon-back"></i
      ></a>
    </div>
    <!-- 修改密码 start -->
    <el-dialog
      v-if="pwdModalVisible"
      title="修改密码"
      :visible.sync="pwdModalVisible"
      width="620px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <reset-pwd @success="submitSuccessAction" />
      <!-- <el-form ref="editForm" :model="editForm" label-width="120px">
        <el-form-item
          label="旧密码："
          prop="oldPwd"
          :rules="[
            { required: true, message: '请填写旧密码', trigger: 'blur' },
          ]"
        >
          <el-input
            placeholder="请输入"
            v-model.trim="editForm.oldPwd"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="新密码："
          prop="newPwd"
          :rules="[
            { required: true, message: '请填写新密码', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' },
          ]"
        >
          <el-input
            placeholder="请输入"
            v-model.trim="editForm.newPwd"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认新密码："
          prop="renewPwd"
          :rules="[
            { required: true, message: '请重新输入新密码', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' },
          ]"
        >
          <el-input
            placeholder="请输入"
            v-model.trim="editForm.renewPwd"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item class="text-right">
          <el-button :loading="saving" type="primary" @click="saveAction"
            >保存</el-button
          >
        </el-form-item>
      </el-form> -->
    </el-dialog>
    <!-- 修改密码 end -->
    <!-- 修改标题 start -->
    <el-dialog
      v-if="titleModalVisible"
      title="修改标题"
      :visible.sync="titleModalVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-form ref="titleForm" :model="titleForm" label-width="140px">
        <el-form-item
          :label="titleForm.list[index].moduleName"
          :prop="`list[${index}].titleText`"
          :rules="[{ required: true, message: '请填写标题' }]"
          v-for="(item, index) in titleForm.list"
          :key="index"
        >
          <el-input
            placeholder="请输入"
            v-model.trim="titleForm.list[index].titleText"
            type="text"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button :loading="saving" type="primary" @click="saveTitleAction"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改标题 end -->
    <notice-bar></notice-bar>
  </el-header>
</template>
<script>
import { mapState } from "vuex";
import NoticeBar from "./noticeBar.vue";
import resetPwd from "./resetPwd.vue";
export default {
  components: { resetPwd, NoticeBar },
  name: "pageHeader",
  props: {
    titleList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapState(["siteInfos"]),
  },
  watch: {
    $route() {
      this.initTitle();
    },
    titleForm: {
      deep: true,
      handler: function(newV, oldV) {
        // let list = newV.list
        // let title = list.filter(item=>item.deviceClassify==0)
        // if(title.length>0){
        // 	this.title = title[0].titleText
        // }
      },
    },
  },
  data() {
    return {
      loading: false,
      pwdModalVisible: false,
      editForm: {
        oldPwd: "",
        newPwd: "",
        renewPwd: "",
      },
      saving: false,
      titlePictureUrl: "",

      titleModalVisible: false,
      title: "公共环境安全监管云平台",
      titleForm: {
        list: [],
      },
      moduleMap: {
        "0": "首页标题",
        "1": "电气火灾监测",
        "2": "建筑消防用水",
        "3": "智慧独立烟感",
        "4": "可燃气体监测",
        "5": "自动联网报警",
        "6": "可视化监测",
        "7": "智能灭火器监测",
        "10": "水泵监测系统",
        "100": "消防物联网",
      },
      serviceTime: "",
      configTitleList: [],
    };
  },
  created() {
    if (this.siteInfos.userType != 1) {
      this.getServiceTime();
    }
    this.getHomeNavList();

    // console.log("accountname",this.siteInfos.homeId)
  },
  methods: {
    getServiceTime() {
      this.$get("/business/business/checkBusinessExpire").then((res) => {
        this.serviceTime = res.data;
      });
    },
    getHomeNavList() {
      if (!this.siteInfos || !this.siteInfos.homeId) return;
      this.$get("/systemsetup/systemsetup/getHomePageLayoutList", {
        homeId: this.siteInfos.homeId,
      }).then(
        (res) => {
          this.configTitleList = res.data;
          this.initTitle();
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    initTitle() {
      if (this.$route.query.title) {
        this.title = this.$route.query.title;
      } else {
        const titleObj = this.configTitleList.find(
          (item) => item.permissionsId == "000"
        );
        this.title = titleObj.subtitleName;
      }
      // this.title = this.$route.query.title || "公共环境安全监管云平台"

      // if(!this.titleList) return
      // this.setTitle(this.titleList)
      // this.titleForm.list = this.titleList.map(item=>{
      // 	return {
      // 		deviceClassify: item.deviceClassify,
      // 		titleText: item.titleText,
      // 		homeId: this.siteInfos.homeId,
      // 		moduleName: this.moduleMap[item.deviceClassify]
      // 	}
      // })
      // console.log(this.titleForm)
    },
    setTitle(list) {
      let title = list.filter((item) => item.deviceClassify == 0);
      if (title.length > 0) {
        this.title = title[0].titleText;
      }
    },
    editTitleAction() {
      this.titleModalVisible = true;
    },
    validatePass2(rule, value, callback) {
      if (value !== this.editForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    validatePass(rule, value, callback) {
      const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;
      if (!reg.test(value)) {
        callback(
          new Error(
            "请输入8-16位字符,可使用大写字母,小写字母,数字或符号的至少三种组合"
          )
        );
      } else {
        callback();
      }
    },
    editAction() {
      this.pwdModalVisible = true;
    },
    exitAction() {
      this.$ajax({
        url: "/systemsetup/systemsetup/logout",
        method: "delete",
      }).then(
        (res) => {
          this.$ajax({
            url: "/systemsetup/systemsetup/logout2",
            method: "delete",
          }).then(
            (res) => {
              this.$store.commit("setSiteInfos", null);
              this.$router.replace("/login");
            },
            (err) => {
              this.$message.error(err.msg);
            }
          );
        },
        (err) => {
          this.$message.error(err.msg);
        }
      );
    },
    goHome() {
      // window.history.length > 1 ? this.$router.go(-1) : this.$router.replace('/')
      this.$router.replace("/");
    },
    getHeaderTitle() {
      this.$get("/systemsetup/systemsetup/getHeaderTitle", {
        accountname: this.siteInfos.accountname,
      }).then(
        (res) => {
          this.titlePictureUrl = res.data.filePath;
        },
        (err) => {}
      );
    },
    saveAction() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          this.saving = true;
          this.$post(
            "/systemsetup/systemsetup/updatePassWord",
            this.editForm
          ).then(
            (data) => {
              this.saving = false;
              this.$message({
                type: "success",
                message: "修改成功",
                center: true,
              });
              this.pwdModalVisible = false;
              this.editForm = {};
            },
            (error) => {
              this.saving = false;
              if (error.msg) {
                this.$message.error(error.msg);
              }
            }
          );
        }
      });
    },
    saveTitleAction() {
      this.$refs["titleForm"].validate((valid) => {
        if (valid) {
          this.saving = true;
          let list = this.titleForm.list.map((item) => {
            return {
              deviceClassify: item.deviceClassify,
              titleText: item.titleText,
              homeId: item.homeId,
            };
          });
          this.$post("/systemsetup/systemsetup/setTextTitle", {
            list: list,
          }).then(
            (data) => {
              this.saving = false;
              this.$message.success("修改成功");
              this.titleModalVisible = false;
              this.setTitle(list);
            },
            (error) => {
              this.saving = false;
              if (error.msg) {
                this.$message.error(error.msg);
              }
            }
          );
        }
      });
    },
    submitSuccessAction() {
      this.pwdModalVisible = false;
    },
  },
};
</script>
